import React from 'react';
import logo from './assets/images/logo.svg';
/* import './assets/css/App.css'; */

/* import Home from './components/Home'; 
import Home2 from './components/Home2';
import News from './components/News';
import Home3 from './components/Home3';
import News2 from './components/News2';
import Home4 from './components/Home4';
import Home5 from './components/Home5';
import List from './components/List';
import TODOList from './components/TODOList'; */

/*import ReactForm from './components/ReactForm'; */
/* import TODOList2 from './components/TODOList2';*/
/* import TODOList3 from './components/TODOList3'; */
/* import TODOList4 from './components/TODOList4'; */
/* import TODOList5 from './components/TODOList5'; */

/* import News3 from './components/News3.js' */

/* import Home6 from './components/Home6.js' */
/* import Home7 from './components/Home7.js' */
/* import LifeCycle from './components/LifeCycle.js' */
/* import LifeCycle2 from './components/LifeCycle2.js' */

import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
/*import Home8 from './components/Home8.js'
import News8 from './components/News8.js'
import Products8 from './components/Products8.js' */

/* import Home8 from './components/Home8.js'
import Products9 from './components/Products9.js'
import News9 from './components/News9.js'
import Content9 from './components/Content9.js'
import ProductContent9 from './components/ProductContent9.js' */
/* import Home10 from './components/Home10.js'
import ProductContent10 from './components/ProductContent10.js' */
/* import Home11 from './components/Home11.js'
import ProductContent11 from './components/ProductContent11.js'
import Login11 from './components/Login11.js' */

/* import routes13 ./model/routes13.js' */
import routes14 from './model/routes14.js'

class App extends React.Component {

  /* constructor(props){
    super(props);
    this.state = {
      title: "我是app组件的title",
      flag: true
    }
  }

  setFlag = () => {
    this.setState({
      
      flag: !this.state.flag
    })
  }

  setTitle = () => {
    this.setState({
      
      title: "我是app组件的title2"
    })
  } */

  render() {
    //render 模板    jsx
    return (
      //<div /* className="App" */>
      //  {/* <header className="App-header">
      //    <img src={logo} className="App-logo" alt="logo" />
      //    <p>
      //      Edit <code>src/App.js</code> and save to reload.
      //    </p>
      //    <a
      //      className="App-link"
      //      href="https://reactjs.org"
      //      target="_blank"
      //      rel="noopener noreferrer"
      //    >
      //      Learn React
      //    </a>
      //  </header> */}
      //  {/* <Home/>
      //  <Home2/>
      //  <News/>
      //  <Home3/>
      //  <News2/>
      //  <Home4/>
      //  <Home5/> */}
      //  {/* <List/>
      //  <TODOList/> */}
      //  {/* <ReactForm/> */}
      //  {/* <TODOList2/> */}
      //  {/* <TODOList3/> */}
      //  {/* <TODOList4/>  */}
      //  {/* <TODOList5/> */} 
      //  {/* <News3/> */}
      //  {/* <Home6/> */}
      //  {/* <Home7/> */}
      //  {/* {
      //    this.state.flag? <LifeCycle title={this.state.title}/> : ""
      //  }
      //  <br/>
      //  <br/>
      //  <button onClick={this.setFlag}>挂载和销毁生命周期函数组件</button>
      //  <br/>
      //  <br/>
      //  <button onClick={this.setTitle}>改变父组件title的值</button> */}

      //  {/* {
      //    this.state.flag? <LifeCycle2 title={this.state.title}/> : ""
      //  }
      //  <br/>
      //  <br/>
      //  <button onClick={this.setFlag}>挂载和销毁生命周期函数组件</button>
      //  <br/>
      //  <br/>
      //  <button onClick={this.setTitle}>改变父组件title的值</button> */}
      //</div>  
      //  {/* <Router>
      //    <header className='title'>
      //      <Link to="/">首页</Link>
      //      <Link to="/news">新闻</Link>
      //      <Link to="/products">商品</Link>
      //    </header>
      //    <br/>
      //    <hr/>
      //    <br/>
      //    <Route exact path="/" component={Home8}/>
      //    <Route path="/news" component={News8}/>
      //    <Route path="/products" component={Products8}/>
      //  </Router> */}
      ///*   <Router>
      //    <header className='title'>
      //      <Link to="/">首页</Link>
      //      <Link to="/news">新闻</Link>
      //      <Link to="/products">商品</Link>
      //    </header>
      //    <br/>
      //    <hr/>
      //    <br/>
      //    <Route exact path="/" component={Home8}/>
      //    <Route path="/news" component={News9}/>
      //    <Route path="/products" component={Products9}/>
      //    <Route path="/content/:aid" component={Content9}/>
      //    <Route path="/productcontent" component={ProductContent9}/>
      //  </Router> */
      //  {/* <Router>
      //    <header className='title'>
      //      <Link to="/">首页</Link>
      //    </header>
      //    <br/>
      //    <hr/>
      //    <br/>
      //     <Route exact path="/" component={Home10}/>
      //     <Route path="/productcontent/:id" component={ProductContent10}/>
      //   </Router>  */}

      //  <Router>
      //    <Route exact path="/" component={Home11}/>
      //    <Route path="/productcontent/:id" component={ProductContent11}/>
      //    <Route path="/login" component={Login11}/>
      //  </Router> 
      //{/* <Router> 
      //  <header className="title">
      //    <Link to="/">首页组件</Link>
      //    <Link to="/user">用户页面</Link>

      //    <Route exact path="/" component={Home}/>
      //    <Route path="/user" component={User}/>
      //  </header>
      //</Router> */}
      //{/* {
      //      routes.map((route, key) => {
      //        if(route.exact){
      //          return <Route exact path={route.path} component={route.component}></Route>
      //        }else {
      //          return <Route path={route.path} component={route.component}></Route>
      //        }
      //      })
      //    } */}
      <Router> 
        <header className="title">
          <Link to="/">首页组件</Link>
          <Link to="/user">用户页面</Link>
        </header>
        
        
          {
            routes14.map((route, key) => {
              if(route.exact){
                return <Route key={key} exact path={route.path}  
                  render={
                    props => (
                      <route.component {...props} routes={route.routes}/>
                      )
                  }></Route>
              }else {
                return <Route key={key} path={route.path} 
                  render={
                    props => (
                      <route.component {...props} routes={route.routes}/>
                      )
                  }></Route>
              }
            })
          }
      </Router>
    );
  }
}

export default App;
